﻿

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>CloudBOX | Responsive Bootstrap 4 Admin Dashboard Template</title>
      
      <!-- Favicon -->
      <link rel="shortcut icon" href="assets/images/favicon.ico" />
      
      <link rel="stylesheet" href="assets/css/backend.min.css">
      <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
      <link rel="stylesheet" href="assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
      <link rel="stylesheet" href="assets/vendor/remixicon/fonts/remixicon.css">
      
      <!-- Viewer Plugin -->
        <!--PDF-->
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/pdf/pdf.viewer.css">
        <!--Docs-->
        <!--PPTX-->
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/pptxjs.css">
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/nv.d3.min.css">
        <!--All Spreadsheet -->
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.css">
        <!--Image viewer-->
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/verySimpleImageViewer/css/jquery.verySimpleImageViewer.css">
        <!--officeToHtml-->
        <link rel="stylesheet" href="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.css">  </head>
  <body class="  ">
    <!-- loader Start -->
    <div id="loading">
          <div id="loading-center">
          </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
      
      <div class="iq-sidebar  sidebar-default ">
          <div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
              <a href="index.html" class="header-logo">
                  <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                  <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
              </a>
              <div class="iq-menu-bt-sidebar">
                  <i class="las la-bars wrapper-menu"></i>
              </div>
          </div>
          <div class="data-scrollbar" data-scroll="1">
              <div class="new-create select-dropdown input-prepend input-append">
                  <div class="btn-group">
                      <label data-toggle="dropdown">
                      <div class="search-query selet-caption"><i class="las la-plus pr-2"></i>Create New</div><span class="search-replace"></span>
                      <span class="caret"><!--icon--></span>
                      </label>
                      <ul class="dropdown-menu">
                          <li><div class="item"><i class="ri-folder-add-line pr-3"></i>New Folder</div></li>
                          <li><div class="item"><i class="ri-file-upload-line pr-3"></i>Upload Files</div></li>
                          <li><div class="item"><i class="ri-folder-upload-line pr-3"></i>Upload Folders</div></li>
                      </ul>
                  </div>
              </div>
              <nav class="iq-sidebar-menu">
                  <ul id="iq-sidebar-toggle" class="iq-menu">
                       <li class=" ">
                              <a href="index.html" class="">
                                  <i class="las la-home iq-arrow-left"></i><span>Dashboard</span>
                              </a>
                          <ul id="dashboard" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                          <a href="#mydrive" class="collapsed" data-toggle="collapse" aria-expanded="false">
                              <i class="las la-hdd"></i><span>My Drive</span>
                              <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                              <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                          </a>
                          <ul id="mydrive" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                                  <li class=" ">
                                          <a href="page-alexa.html">
                                              <i class="lab la-blogger-b"></i><span>Alexa Workshop</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-android.html">
                                              <i class="las la-share-alt"></i><span>Android</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-brightspot.html">
                                              <i class="las la-icons"></i><span>Brightspot</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-ionic.html">
                                              <i class="las la-icons"></i><span>Ionic Chat App</span>
                                          </a>
                                  </li>
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-files.html" class="">
                                  <i class="lar la-file-alt iq-arrow-left"></i><span>Files</span>
                              </a>
                          <ul id="page-files" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-folders.html" class="">
                                  <i class="las la-stopwatch iq-arrow-left"></i><span>Recent</span>
                              </a>
                          <ul id="page-folders" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-favourite.html" class="">
                                  <i class="lar la-star"></i><span>Favourite</span>
                              </a>
                          <ul id="page-fevourite" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-delete.html" class="">
                                  <i class="las la-trash-alt iq-arrow-left"></i><span>Trash</span>
                              </a>
                          <ul id="page-delete" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                          <a href="#otherpage" class="collapsed" data-toggle="collapse" aria-expanded="false">
                              <i class="lab la-wpforms iq-arrow-left"></i><span>other page</span>
                              <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                              <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                          </a>
                          <ul id="otherpage" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                                  <li class=" ">
                                      <a href="#user" class="collapsed" data-toggle="collapse" aria-expanded="false">
                                          <i class="las la-user-cog"></i><span>User Details</span>
                                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                                      </a>
                                      <ul id="user" class="iq-submenu collapse" data-parent="#otherpage">
                                              <li class="active">
                                                  <a href="user-profile.html">
                                                      <i class="las la-id-card"></i><span>User Profile</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="user-add.html">
                                                      <i class="las la-user-plus"></i><span>User Add</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="user-list.html">
                                                      <i class="las la-list-alt"></i><span>User List</span>
                                                  </a>
                                              </li>
                                      </ul>
                                  </li>
                                  <li class=" ">
                                      <a href="#ui" class="collapsed" data-toggle="collapse" aria-expanded="false">
                                          <i class="lab la-uikit iq-arrow-left"></i><span>UI Elements</span>
                                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                                      </a>
                                      <ul id="ui" class="iq-submenu collapse" data-parent="#otherpage">
                                              <li class=" ">
                                                  <a href="ui-avatars.html">
                                                      <i class="las la-user-tie"></i><span>Avatars</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-alerts.html">
                                                      <i class="las la-exclamation-triangle"></i><span>Alerts</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-badges.html">
                                                      <i class="las la-id-badge"></i><span>Badges</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-breadcrumb.html">
                                                      <i class="las la-ellipsis-h"></i><span>Breadcrumb</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-buttons.html">
                                                      <i class="las la-ticket-alt"></i><span>Buttons</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-buttons-group.html">
                                                      <i class="las la-object-group"></i><span>Buttons Group</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-boxshadow.html">
                                                      <i class="las la-boxes"></i><span>Box Shadow</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-colors.html">
                                                      <i class="las la-brush"></i><span>Colors</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-cards.html">
                                                      <i class="las la-credit-card"></i><span>Cards</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-carousel.html">
                                                      <i class="las la-sliders-h"></i><span>Carousel</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-grid.html">
                                                      <i class="las la-th-large"></i><span>Grid</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-helper-classes.html">
                                                      <i class="las la-hands-helping"></i><span>Helper classes</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-images.html">
                                                      <i class="las la-image"></i><span>Images</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-list-group.html">
                                                      <i class="las la-list-alt"></i><span>list Group</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-media-object.html">
                                                      <i class="las la-photo-video"></i><span>Media</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-modal.html">
                                                      <i class="las la-columns"></i><span>Modal</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-notifications.html">
                                                      <i class="las la-bell"></i><span>Notifications</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-pagination.html">
                                                      <i class="las la-ellipsis-h"></i><span>Pagination</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-popovers.html">
                                                      <i class="las la-spinner"></i><span>Popovers</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-progressbars.html">
                                                      <i class="las la-heading"></i><span>Progressbars</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-typography.html">
                                                      <i class="las la-tablet"></i><span>Typography</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-tabs.html">
                                                      <i class="las la-tablet"></i><span>Tabs</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-tooltips.html">
                                                      <i class="las la-magnet"></i><span>Tooltips</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="ui-embed-video.html">
                                                      <i class="las la-play-circle"></i><span>Video</span>
                                                  </a>
                                              </li>
                                      </ul>
                                  </li>
                                  <li class=" ">
                                      <a href="#auth" class="collapsed" data-toggle="collapse" aria-expanded="false">
                                          <i class="las la-torah iq-arrow-left"></i><span>Authentication</span>
                                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                                      </a>
                                      <ul id="auth" class="iq-submenu collapse" data-parent="#otherpage">
                                              <li class=" ">
                                                  <a href="auth-sign-in.html">
                                                      <i class="las la-sign-in-alt"></i><span>Login</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="auth-sign-up.html">
                                                      <i class="las la-registered"></i><span>Register</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="auth-recoverpw.html">
                                                      <i class="las la-unlock-alt"></i><span>Recover Password</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="auth-confirm-mail.html">
                                                      <i class="las la-envelope-square"></i><span>Confirm Mail</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="auth-lock-screen.html">
                                                      <i class="las la-lock"></i><span>Lock Screen</span>
                                                  </a>
                                              </li>
                                      </ul>
                                  </li>
                                  <li class=" ">
                                      <a href="#pricing" class="collapsed" data-toggle="collapse" aria-expanded="false">
                                          <i class="las la-coins"></i><span>Pricing</span>
                                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                                      </a>
                                      <ul id="pricing" class="iq-submenu collapse" data-parent="#otherpage">
                                              <li class=" ">
                                                  <a href="pricing.html">
                                                      <i class="las la-weight"></i><span>Pricing 1</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="pricing-2.html">
                                                      <i class="las la-dna"></i><span>Pricing 2</span>
                                                  </a>
                                              </li>
                                      </ul>
                                  </li>
                                  <li class=" ">
                                      <a href="#pages-error" class="collapsed" data-toggle="collapse" aria-expanded="false">
                                          <i class="las la-exclamation-triangle"></i><span>Error</span>
                                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                                      </a>
                                      <ul id="pages-error" class="iq-submenu collapse" data-parent="#otherpage">
                                              <li class=" ">
                                                  <a href="pages-error.html">
                                                      <i class="las la-bomb"></i><span>Error 404</span>
                                                  </a>
                                              </li>
                                              <li class=" ">
                                                  <a href="pages-error-500.html">
                                                      <i class="las la-exclamation-circle"></i><span>Error 500</span>
                                                  </a>
                                              </li>
                                      </ul>
                                  </li>
                                  <li class=" ">
                                          <a href="pages-blank-page.html">
                                              <i class="las la-pager"></i><span>Blank Page</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="pages-maintenance.html">
                                              <i class="las la-cubes"></i><span>Maintenance</span>
                                          </a>
                                  </li>
                          </ul>
                       </li>
                  </ul>
              </nav>
              <div class="sidebar-bottom">
                  <h4 class="mb-3"><i class="las la-cloud mr-2"></i>Storage</h4>
                  <p>17.1 / 20 GB Used</p>
                  <div class="iq-progress-bar mb-3">
                      <span class="bg-primary iq-progress progress-1" data-percent="67">
                      </span>
                  </div>
                  <p>75% Full - 3.9 GB Free</p>
                  <a href="#" class="btn btn-outline-primary view-more mt-4">Buy Storage</a>
              </div>
              <div class="p-3"></div>
          </div>
          </div>       <div class="iq-top-navbar">
          <div class="iq-navbar-custom">
              <nav class="navbar navbar-expand-lg navbar-light p-0">
              <div class="iq-navbar-logo d-flex align-items-center justify-content-between">
                  <i class="ri-menu-line wrapper-menu"></i>
                  <a href="index.html" class="header-logo">
                      <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                      <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
                  </a>
              </div>
                  <div class="iq-search-bar device-search">
                      
                      <form>
                          <div class="input-prepend input-append">
                              <div class="btn-group">
                                  <label class="dropdown-toggle searchbox" data-toggle="dropdown">
                                  <input class="dropdown-toggle search-query text search-input" type="text"  placeholder="Type here to search..."><span class="search-replace"></span>
                                  <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                                  <span class="caret"><!--icon--></span>
                                  </label>
                                  <ul class="dropdown-menu">
                                      <li><a href="#"><div class="item"><i class="far fa-file-pdf bg-info"></i>PDFs</div></a></li>
                                      <li><a href="#"><div class="item"><i class="far fa-file-alt bg-primary"></i>Documents</div></a></li>
                                      <li><a href="#"><div class="item"><i class="far fa-file-excel bg-success"></i>Spreadsheet</div></a></li>
                                      <li><a href="#"><div class="item"><i class="far fa-file-powerpoint bg-danger"></i>Presentation</div></a></li>
                                      <li><a href="#"><div class="item"><i class="far fa-file-image bg-warning"></i>Photos & Images</div></a></li>
                                      <li><a href="#"><div class="item"><i class="far fa-file-video bg-info"></i>Videos</div></a></li>
                                  </ul>
                              </div>
                          </div>
                      </form>
                  </div>
      
                  <div class="d-flex align-items-center">
                      <div class="change-mode">
                          <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                              <div class="custom-switch-inner">
                                  <p class="mb-0"> </p>
                                  <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                  <label class="custom-control-label" for="dark-mode" data-mode="toggle">
                                      <span class="switch-icon-left"><i class="a-left"></i></span>
                                      <span class="switch-icon-right"><i class="a-right"></i></span>
                                  </label>
                              </div>
                          </div>
                      </div>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"  aria-label="Toggle navigation">
                      <i class="ri-menu-3-line"></i>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="navbar-nav ml-auto navbar-list align-items-center">
                          <li class="nav-item nav-icon search-content">
                              <a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="ri-search-line"></i>
                              </a>
                              <div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
                                  <form action="#" class="searchbox p-2">
                                      <div class="form-group mb-0 position-relative">
                                      <input type="text" class="text search-input font-size-12" placeholder="type here to search...">
                                      <a href="#" class="search-link"><i class="las la-search"></i></a> 
                                      </div>
                                  </form>
                              </div>
                          </li> 
                          <li class="nav-item nav-icon dropdown">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="ri-question-line"></i>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton01">
                                  <div class="card shadow-none m-0">
                                      <div class="card-body p-0 ">
                                          <div class="p-3">
                                              <a href="#" class="iq-sub-card pt-0"><i class="ri-questionnaire-line"></i>Help</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-recycle-line"></i>Training</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-refresh-line"></i>Updates</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-service-line"></i>Terms and Policy</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-feedback-line"></i>Send Feedback</a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown"> 
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                              <i class="ri-settings-3-line"></i>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton02">
                                  <div class="card shadow-none m-0">
                                      <div class="card-body p-0 ">
                                          <div class="p-3">
                                              <a href="#" class="iq-sub-card pt-0"><i class="ri-settings-3-line"></i> Settings</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-hard-drive-line"></i> Get Drive for desktop</a>
                                              <a href="#" class="iq-sub-card"><i class="ri-keyboard-line"></i> Keyboard Shortcuts</a>
                                          </div>                                
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown caption-content">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                  <div class="caption bg-primary line-height">P</div>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton03">
                                  <div class="card mb-0">
                                      <div class="card-header d-flex justify-content-between align-items-center mb-0">
                                      <div class="header-title">
                                          <h4 class="card-title mb-0">Profile</h4>
                                      </div>
                                      <div class="close-data text-right badge badge-primary cursor-pointer "><i class="ri-close-fill"></i></div>
                                      </div>
                                      <div class="card-body">
                                          <div class="profile-header">
                                              <div class="cover-container text-center">
                                                  <div class="rounded-circle profile-icon bg-primary mx-auto d-block">
                                                      P                                                    
                                                      <a href="">
                                                          
                                                      </a>
                                                  </div>
                                                  <div class="profile-detail mt-3">
                                                  <h5><a href="user-profile-edit.html">Panny Marco</a></h5>
                                                  <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e393828d8d9a8e8291808ca3848e828a8fcd808c8e">[email&#160;protected]</a></p>
                                                  </div>
                                                  <a href="auth-sign-in.html" class="btn btn-primary">Sign Out</a>
                                              </div>
                                              <div class="profile-details mt-4 pt-4 border-top">
                                                  <div class="media align-items-center mb-3">
                                                      <div class="rounded-circle iq-card-icon-small bg-primary">
                                                          A
                                                      </div>
                                                      <div class="media-body ml-3">
                                                          <div class="media justify-content-between">
                                                              <h6 class="mb-0">Anna Mull</h6>
                                                              <p class="mb-0 font-size-12"><i>Signed Out</i></p>
                                                          </div>
                                                          <p class="mb-0 font-size-12"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9c93939c90889191bd9a909c9491d39e9290">[email&#160;protected]</a></p>
                                                      </div>                                                 
                                                  </div>
                                                  <div class="media align-items-center mb-3">
                                                      <div class="rounded-circle iq-card-icon-small bg-success">
                                                          K
                                                      </div>
                                                      <div class="media-body ml-3">
                                                          <div class="media justify-content-between">
                                                              <h6 class="mb-0">King Poilin</h6>
                                                              <p class="mb-0 font-size-12"><i>Signed Out</i></p>
                                                          </div>
                                                          <p class="mb-0 font-size-12"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f9fbfcf5e2fdfbfefbfcd2f5fff3fbfebcf1fdff">[email&#160;protected]</a></p>
                                                      </div>
                                                  </div>
                                                  <div class="media align-items-center">
                                                      <div class="rounded-circle iq-card-icon-small bg-danger">
                                                          D
                                                      </div>
                                                      <div class="media-body ml-3">
                                                          <div class="media justify-content-between">
                                                              <h6 class="mb-0">Devid Worner</h6>
                                                              <p class="mb-0 font-size-12"><i>Signed Out</i></p>
                                                          </div>
                                                          <p class="mb-0 font-size-12"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7e7f6c737e6d7568747f685a7d777b737634797577">[email&#160;protected]</a></p>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          </ul>                     
                      </div> 
                  </div>
              </nav>
          </div>
      </div>
      <div class="content-page">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-12">
               <div class="card car-transparent">
                  <div class="card-body p-0">
                     <div class="profile-image position-relative">
                        <img src="assets/images/page-img/profile.png" class="img-fluid rounded w-100" alt="">
                     </div>
                     <div class="profile-overly">
                        <h4>Donatella Nobatti</h4>
                        <span>sr. Manager</span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-body">
                     <h4 class="mb-3">Personal Profile</h4>
                     <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque.</p>
                  </div>
               </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-body text-center">
                     <svg width="36" height="48" viewBox="0 0 36 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                           d="M9.10495 33.9964C8.29026 33.1817 8.71495 33.4114 6.74995 32.8855C5.85838 32.6464 5.07463 32.1871 4.36588 31.6367L0.112441 42.0655C-0.299122 43.0752 0.469629 44.1721 1.559 44.1308L6.4987 43.9424L9.8962 47.5311C10.6462 48.3224 11.9624 48.0758 12.374 47.0661L17.2537 35.1017C16.2375 35.668 15.1096 35.9999 13.9434 35.9999C12.1153 35.9999 10.3978 35.2883 9.10495 33.9964V33.9964ZM35.8875 42.0655L31.634 31.6367C30.9253 32.188 30.1415 32.6464 29.25 32.8855C27.2746 33.4142 27.7078 33.1836 26.895 33.9964C25.6021 35.2883 23.8837 35.9999 22.0556 35.9999C20.8893 35.9999 19.7615 35.6671 18.7453 35.1017L23.625 47.0661C24.0365 48.0758 25.3537 48.3224 26.1028 47.5311L29.5012 43.9424L34.4409 44.1308C35.5303 44.1721 36.299 43.0742 35.8875 42.0655V42.0655ZM24.6562 31.8749C26.0887 30.4171 26.2528 30.5427 28.2928 29.9867C29.595 29.6314 30.6131 28.5955 30.9618 27.2699C31.6631 24.6074 31.4812 24.9289 33.3946 22.9808C34.3481 22.0105 34.7203 20.5958 34.3715 19.2702C33.6712 16.6096 33.6703 16.9808 34.3715 14.3174C34.7203 12.9917 34.3481 11.5771 33.3946 10.6067C31.4812 8.65862 31.6631 8.97925 30.9618 6.31768C30.6131 4.99206 29.595 3.95612 28.2928 3.60081C25.679 2.88737 25.994 3.07393 24.0787 1.12487C23.1253 0.154558 21.735 -0.225129 20.4328 0.130183C17.82 0.842683 18.1846 0.843621 15.5671 0.130183C14.2649 -0.225129 12.8746 0.153621 11.9212 1.12487C10.0078 3.073 10.3228 2.88737 7.70807 3.60081C6.40588 3.95612 5.38776 4.99206 5.03901 6.31768C4.33869 8.97925 4.51963 8.65862 2.60619 10.6067C1.65275 11.5771 1.27963 12.9917 1.62932 14.3174C2.32963 16.9761 2.33057 16.6049 1.62932 19.2692C1.28057 20.5949 1.65275 22.0096 2.60619 22.9808C4.51963 24.9289 4.33776 24.6074 5.03901 27.2699C5.38776 28.5955 6.40588 29.6314 7.70807 29.9867C9.8062 30.5586 9.96276 30.4686 11.3437 31.8749C12.584 33.1377 14.5162 33.3636 16.0068 32.4205C16.6029 32.0421 17.2944 31.8411 18.0004 31.8411C18.7065 31.8411 19.3979 32.0421 19.994 32.4205C21.4837 33.3636 23.4159 33.1377 24.6562 31.8749ZM9.15557 16.4961C9.15557 11.5246 13.1156 7.49425 18 7.49425C22.8843 7.49425 26.8443 11.5246 26.8443 16.4961C26.8443 21.4677 22.8843 25.498 18 25.498C13.1156 25.498 9.15557 21.4677 9.15557 16.4961V16.4961Z"
                           fill="#8f93f6" />
                     </svg>
                     <h3 class="mb-2 mt-3 text-primary">42+</h3>
                     <h4>Awards</h4>
                  </div>
               </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-body text-center">
                     <svg width="60" height="48" viewBox="0 0 60 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                           d="M23.9091 24.5297C24.495 25.1156 25.4447 25.1156 26.0306 24.5297L27.0909 23.4694C27.6769 22.8834 27.6769 21.9338 27.0909 21.3478L23.7422 18L27.09 14.6512C27.6759 14.0653 27.6759 13.1156 27.09 12.5297L26.0297 11.4694C25.4437 10.8834 24.4941 10.8834 23.9081 11.4694L18.4387 16.9387C17.8528 17.5247 17.8528 18.4744 18.4387 19.0603L23.9091 24.5297V24.5297ZM32.91 23.4703L33.9703 24.5306C34.5563 25.1166 35.5059 25.1166 36.0919 24.5306L41.5613 19.0613C42.1472 18.4753 42.1472 17.5256 41.5613 16.9397L36.0919 11.4703C35.5059 10.8844 34.5563 10.8844 33.9703 11.4703L32.91 12.5306C32.3241 13.1166 32.3241 14.0662 32.91 14.6522L36.2578 18L32.91 21.3488C32.3241 21.9347 32.3241 22.8844 32.91 23.4703V23.4703ZM58.5 39H35.7694C35.7 40.8572 34.3903 42 32.7 42H27C25.2478 42 23.9044 40.3622 23.9278 39H1.5C0.675 39 0 39.675 0 40.5V42C0 45.3 2.7 48 6 48H54C57.3 48 60 45.3 60 42V40.5C60 39.675 59.325 39 58.5 39ZM54 4.5C54 2.025 51.975 0 49.5 0H10.5C8.025 0 6 2.025 6 4.5V36H54V4.5ZM48 30H12V6H48V30Z"
                           fill="#7fdd85" />
                     </svg>
                     <h3 class="mb-2 mt-3 text-success">3+ years </h3>
                     <h4>Experience</h4>
                  </div>
               </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-body text-center">
                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                           d="M35.3676 11.2517C34.8398 11.2372 34.3256 11.3198 33.8438 11.4898V7.03125C33.8438 4.70503 31.9512 2.8125 29.625 2.8125C29.0759 2.8125 28.5517 2.91909 28.0701 3.11072C27.5821 1.32047 25.9428 0 24 0C22.0572 0 20.4179 1.32047 19.9299 3.11072C19.4483 2.91909 18.9241 2.8125 18.375 2.8125C16.0488 2.8125 14.1562 4.70503 14.1562 7.03125V11.4895C13.6747 11.3198 13.1607 11.2372 12.6324 11.2517C10.3711 11.3136 8.53125 13.2316 8.53125 15.5272V48H36.6562V41.2395L38.5637 36.4704C39.1643 34.9689 39.4688 33.3877 39.4688 31.7705V15.5272C39.4688 13.2316 37.6289 11.3136 35.3676 11.2517V11.2517ZM11.3438 45.1875V42.375H33.8438V45.1875H11.3438ZM36.6562 31.7705C36.6562 33.0283 36.4194 34.2581 35.9523 35.4261L34.2979 39.5625H11.3438V15.5272C11.3438 14.7405 11.9564 14.0837 12.7095 14.0631C13.0926 14.0504 13.4561 14.1937 13.7305 14.4607C14.0051 14.7278 14.1563 15.0858 14.1563 15.4687V21.9843H16.9688V7.03125C16.9688 6.25584 17.5997 5.625 18.3751 5.625C19.1505 5.625 19.7813 6.25584 19.7813 7.03125V21.9844H22.5938V4.21875C22.5938 3.44334 23.2247 2.8125 24.0001 2.8125C24.7755 2.8125 25.4063 3.44334 25.4063 4.21875V21.9844H28.2188V7.03125C28.2188 6.25584 28.8497 5.625 29.6251 5.625C30.4005 5.625 31.0313 6.25584 31.0313 7.03125V24.1714C24.712 24.8732 19.7812 30.2467 19.7812 36.75H22.5938C22.5938 31.3222 27.0097 26.9062 32.4375 26.9062H33.8438V15.4688C33.8438 15.0859 33.995 14.7278 34.2696 14.4608C34.544 14.1938 34.9067 14.0508 35.2906 14.0632C36.0436 14.0838 36.6562 14.7406 36.6562 15.5273V31.7705Z"
                           fill="#fad263" />
                     </svg>
                     <h3 class="mb-2 mt-3 text-warning">424+</h3>
                     <h4>Participated</h4>
                  </div>
               </div>
            </div>
            <div class="col-lg-7 col-md-6">
               <div class="row">
                  <div class="col-md-12 col-lg-6">
                     <div class="card card-block card-stretch card-height">
                        <div class="card-header">
                           <div class="header-title">
                              <h4 class="card-title">Languages</h4>
                           </div>
                        </div>
                        <div class="card-body">
                           <ul class="list-inline p-0 mb-0">
                              <li>
                                 <div class="d-flex align-items-center justify-content-between mb-3">
                                    <h6>English</h6>
                                    <div class="iq-progress-bar-linear d-inline-block mt-1 w-50">
                                       <div class="iq-progress-bar iq-bg-primary">
                                          <span class="bg-primary" data-percent="70" style="transition: width 2s ease 0s; width: 70%;"></span>
                                       </div>
                                    </div>
                                    <div class="percentage float-right text-primary font-weight-bold">70%</div>   
                                 </div>
                              </li>
                              <li>
                                 <div class="d-flex align-items-center justify-content-between mb-3">
                                    <h6>Spanish</h6>
                                    <div class="iq-progress-bar-linear d-inline-block mt-1 w-50">
                                       <div class="iq-progress-bar iq-bg-success">
                                          <span class="bg-success" data-percent="50" style="transition: width 2s ease 0s; width: 50%;"></span>
                                       </div>
                                    </div>
                                    <div class="percentage float-right text-success font-weight-bold">50%</div> 
                                 </div>
                              </li>
                              <li>
                                 <div class="d-flex align-items-center justify-content-between mb-3">
                                    <h6>French</h6>
                                    <div class="iq-progress-bar-linear d-inline-block mt-1 w-50">
                                       <div class="iq-progress-bar iq-bg-info">
                                          <span class="bg-info" data-percent="65" style="transition: width 2s ease 0s; width: 65%;"></span>
                                       </div>
                                    </div>
                                    <div class="percentage float-right text-info font-weight-bold">65%</div> 
                                 </div>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12 col-lg-6">
                     <div class="card card-block card-stretch card-height">
                        <div class="card-header">
                           <div class="header-title">
                              <h4 class="card-title">Social</h4>
                           </div>
                        </div>
                        <div class="card-body">
                           <ul class="list-inline p-0 m-0">
                              <li class="mb-3 d-flex">
                                 <span><i class="lab la-facebook-f text-primary font-size-20 mr-3"></i></span>
                                 <p class="mb-0 font-size-16 line-height">fb.me/nataliedawson</p>
                              </li>
                              <li class="mb-3 d-flex">
                                 <span><i class="lab la-twitter text-info font-size-20 mr-3"></i></span>
                                 <p class="mb-0 font-size-16 line-height">@nataliedawson</p>
                              </li>
                              <li class=" d-flex">
                                 <span><i class="lab la-instagram  text-danger font-size-20 mr-3"></i></span>
                                 <p class="mb-0 font-size-16 line-height">@natalietweets</p>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-12">
                     <div class="card card-block card-stretch card-height">
                        <div class="card-header">
                           <div class="header-title">
                              <h4 class="card-title">Experience</h4>
                           </div>
                        </div>
                        <div class="card-body">
                           <ul class="list-inline mb-0 p-0">
                              <li class="d-flex align-items-center mb-3">
                                 <span class="bg-danger rounded-small iq-card-icon-small mr-3">1</span>
                                 <p class="mb-0 font-size-16">Software Engineer at Mathica Labs | 2018 - present</p>
                              </li>
                              <li class="d-flex align-items-center">
                                 <span class="bg-primary rounded-small iq-card-icon-small mr-3">2</span>
                                 <p class="mb-0 font-size-16">Junior Software Engineer at Zimcore Solutions | 2015 - 2018</p>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-5 col-md-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-header">
                     <div class="header-title">
                        <h4 class="card-title">Education Traning</h4>
                     </div>
                  </div>
                  <div class="card-body">
                     <ul class="list-inline p-0 m-0">
                        <li class="d-flex align-items-center mb-3">
                           <div class="profile-icon iq-icon-box rounded-small bg-light svg-danger text-center">
                              <svg width="30" height="30" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g clip-path="url(#clip0)">
                                    <path
                                       d="M23.3379 5.745L12.8777 2.53125C12.3077 2.35612 11.6927 2.35612 11.1231 2.53125L0.662429 5.745C-0.220321 6.01612 -0.220321 7.18349 0.662429 7.45462L2.48605 8.01487C2.08593 8.50949 1.83993 9.11287 1.81555 9.77362C1.45443 9.98062 1.20018 10.3541 1.20018 10.8C1.20018 11.2042 1.41318 11.5444 1.71993 11.7619L0.762554 16.0699C0.679304 16.4445 0.964304 16.8 1.34793 16.8H3.45205C3.83605 16.8 4.12105 16.4445 4.0378 16.0699L3.08043 11.7619C3.38718 11.5444 3.60018 11.2042 3.60018 10.8C3.60018 10.3661 3.35755 10.0031 3.01293 9.79237C3.04143 9.22912 3.32943 8.73112 3.7888 8.41537L11.1227 10.6687C11.4624 10.773 12.1142 10.9031 12.8773 10.6687L23.3379 7.45499C24.2211 7.1835 24.2211 6.0165 23.3379 5.745V5.745ZM13.2298 11.8159C12.1599 12.1444 11.2483 11.9629 10.7702 11.8159L5.33193 10.1452L4.80018 14.4C4.80018 15.7256 8.02368 16.8 12.0002 16.8C15.9767 16.8 19.2002 15.7256 19.2002 14.4L18.6684 10.1449L13.2298 11.8159V11.8159Z"
                                       fill="#ef9fc4" />
                                 </g>
                                 <defs>
                                    <clipPath id="clip0">
                                       <rect width="24" height="19.2" fill="white" />
                                    </clipPath>
                                 </defs>
                              </svg>
                           </div>
                           <div class="pl-3">
                              <h5>South Kellergrove Junior</h5>
                              <p class="mb-0">Junior High School | Class of 2008</p>
                           </div>
                        </li>
                        <li class="d-flex align-items-center mb-3">
                           <div class="profile-icon iq-icon-box rounded-small  bg-light svg-primary text-center">
                              <svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                    d="M17.1107 17.1746L12 22.2853L6.88929 17.1746C3.05893 17.3406 0 20.4746 0 24.3424V24.8567C0 26.2764 1.15179 27.4281 2.57143 27.4281H21.4286C22.8482 27.4281 24 26.2764 24 24.8567V24.3424C24 20.4746 20.9411 17.3406 17.1107 17.1746ZM0.728571 4.27457L1.07143 4.35493V7.4835C0.696429 7.7085 0.428571 8.09957 0.428571 8.571C0.428571 9.021 0.675 9.396 1.02321 9.62636L0.1875 12.9639C0.0964286 13.3335 0.3 13.7139 0.594643 13.7139H2.83393C3.12857 13.7139 3.33214 13.3335 3.24107 12.9639L2.40536 9.62636C2.75357 9.396 3 9.021 3 8.571C3 8.09957 2.73214 7.7085 2.35714 7.4835V4.66564L5.89286 5.51743C5.43214 6.43886 5.14286 7.46743 5.14286 8.571C5.14286 12.3585 8.2125 15.4281 12 15.4281C15.7875 15.4281 18.8571 12.3585 18.8571 8.571C18.8571 7.46743 18.5732 6.43886 18.1071 5.51743L23.2661 4.27457C24.2411 4.03886 24.2411 2.82278 23.2661 2.58707L13.0661 0.122784C12.3696 -0.0432879 11.6357 -0.0432879 10.9393 0.122784L0.728571 2.58171C-0.241071 2.81743 -0.241071 4.03886 0.728571 4.27457Z"
                                    fill="#8f93f6" />
                              </svg>
                           </div>
                           <div class="pl-3">
                              <h5>Milchuer College</h5>
                              <p class="mb-0">Master of Science in Computer Science | 2015</p>
                           </div>
                        </li>
                        <li class="d-flex align-items-center mb-3">
                           <div class="profile-icon iq-icon-box rounded-small bg-light svg-warning text-center">
                              <svg width="28" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                    d="M23.25 6.46152V7.26922C23.25 7.37632 23.2105 7.47904 23.1402 7.55478C23.0698 7.63051 22.9745 7.67306 22.875 7.67306H21.75V8.27883C21.75 8.61337 21.4981 8.8846 21.1875 8.8846H2.8125C2.50186 8.8846 2.25 8.61337 2.25 8.27883V7.67306H1.125C1.02554 7.67306 0.930161 7.63051 0.859835 7.55478C0.789509 7.47904 0.75 7.37632 0.75 7.26922V6.46152C0.750001 6.38163 0.772007 6.30353 0.813234 6.2371C0.854462 6.17068 0.913058 6.11892 0.981609 6.08837L11.8566 1.64606C11.9484 1.60512 12.0516 1.60512 12.1434 1.64606L23.0184 6.08837C23.0869 6.11892 23.1455 6.17068 23.1868 6.2371C23.228 6.30353 23.25 6.38163 23.25 6.46152V6.46152ZM22.125 21.8077H1.875C1.25367 21.8077 0.75 22.3501 0.75 23.0192V23.8269C0.75 23.934 0.789509 24.0367 0.859835 24.1125C0.930161 24.1882 1.02554 24.2308 1.125 24.2308H22.875C22.9745 24.2308 23.0698 24.1882 23.1402 24.1125C23.2105 24.0367 23.25 23.934 23.25 23.8269V23.0192C23.25 22.3501 22.7463 21.8077 22.125 21.8077ZM4.5 9.69229V19.3846H2.8125C2.50186 19.3846 2.25 19.6558 2.25 19.9904V21H21.75V19.9904C21.75 19.6558 21.4981 19.3846 21.1875 19.3846H19.5V9.69229H16.5V19.3846H13.5V9.69229H10.5V19.3846H7.5V9.69229H4.5Z"
                                    fill="#fad263" />
                              </svg>
                           </div>
                           <div class="pl-3">
                              <h5>Beechtown University</h5>
                              <p class="mb-0">Bachelor of Science in Computer Science | 2013</p>
                           </div>
                        </li>
                        <li class="d-flex align-items-center mb-3">
                           <div class="profile-icon iq-icon-box rounded-small  bg-light svg-success text-center">
                              <svg width="26" height="24" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g clip-path="url(#clip0)">
                                    <path
                                       d="M0 8.39995V18.5999C0 18.9314 0.2685 19.1999 0.6 19.1999H3.6V7.19994H1.2C0.537375 7.19994 0 7.73732 0 8.39995ZM13.5 6.59994H12.6V5.09994C12.6 4.93419 12.4658 4.79994 12.3 4.79994H11.7C11.5343 4.79994 11.4 4.93419 11.4 5.09994V7.49994C11.4 7.66569 11.5343 7.79995 11.7 7.79995H13.5C13.6658 7.79995 13.8 7.66569 13.8 7.49994V6.89994C13.8 6.73419 13.6658 6.59994 13.5 6.59994ZM18.6656 4.20144L12.6656 0.201317C12.4685 0.0700041 12.2369 -6.10352e-05 12 -6.10352e-05C11.7631 -6.10352e-05 11.5315 0.0700041 11.3344 0.201317L5.33438 4.20144C5.17003 4.31101 5.03527 4.45945 4.94206 4.63358C4.84884 4.80772 4.80004 5.00218 4.8 5.19969V19.1999H9.6V13.7999C9.6 13.4684 9.8685 13.1999 10.2 13.1999H13.8C14.1315 13.1999 14.4 13.4684 14.4 13.7999V19.1999H19.2V5.20007C19.2 4.79882 18.9994 4.42382 18.6656 4.20144ZM12 9.59995C10.3433 9.59995 9 8.2567 9 6.59994C9 4.94319 10.3433 3.59994 12 3.59994C13.6568 3.59994 15 4.94319 15 6.59994C15 8.2567 13.6568 9.59995 12 9.59995ZM22.8 7.19994H20.4V19.1999H23.4C23.7315 19.1999 24 18.9314 24 18.5999V8.39995C24 7.73732 23.4626 7.19994 22.8 7.19994Z"
                                       fill="#7fdd85" />
                                 </g>
                                 <defs>
                                    <clipPath id="clip1">
                                       <rect width="24" height="19.2" fill="white" />
                                    </clipPath>
                                 </defs>
                              </svg>
                           </div>
                           <div class="pl-3">
                              <h5>South Kellergrove High</h5>
                              <p class="mb-0">Senior High School | 2010</p>
                           </div>
                        </li>
                        <li class="d-flex align-items-center">
                           <div class="profile-icon iq-icon-box rounded-small  bg-light svg-info text-center">
                              <svg width="26" height="24" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g clip-path="url(#clip0)">
                                    <path
                                       d="M0 8.39995V18.5999C0 18.9314 0.2685 19.1999 0.6 19.1999H3.6V7.19994H1.2C0.537375 7.19994 0 7.73732 0 8.39995ZM13.5 6.59994H12.6V5.09994C12.6 4.93419 12.4658 4.79994 12.3 4.79994H11.7C11.5343 4.79994 11.4 4.93419 11.4 5.09994V7.49994C11.4 7.66569 11.5343 7.79995 11.7 7.79995H13.5C13.6658 7.79995 13.8 7.66569 13.8 7.49994V6.89994C13.8 6.73419 13.6658 6.59994 13.5 6.59994ZM18.6656 4.20144L12.6656 0.201317C12.4685 0.0700041 12.2369 -6.10352e-05 12 -6.10352e-05C11.7631 -6.10352e-05 11.5315 0.0700041 11.3344 0.201317L5.33438 4.20144C5.17003 4.31101 5.03527 4.45945 4.94206 4.63358C4.84884 4.80772 4.80004 5.00218 4.8 5.19969V19.1999H9.6V13.7999C9.6 13.4684 9.8685 13.1999 10.2 13.1999H13.8C14.1315 13.1999 14.4 13.4684 14.4 13.7999V19.1999H19.2V5.20007C19.2 4.79882 18.9994 4.42382 18.6656 4.20144ZM12 9.59995C10.3433 9.59995 9 8.2567 9 6.59994C9 4.94319 10.3433 3.59994 12 3.59994C13.6568 3.59994 15 4.94319 15 6.59994C15 8.2567 13.6568 9.59995 12 9.59995ZM22.8 7.19994H20.4V19.1999H23.4C23.7315 19.1999 24 18.9314 24 18.5999V8.39995C24 7.73732 23.4626 7.19994 22.8 7.19994Z"
                                       fill="#fcbba5" />
                                 </g>
                                 <defs>
                                    <clipPath id="clip2">
                                       <rect width="24" height="19.2" fill="white" />
                                    </clipPath>
                                 </defs>
                              </svg>
                           </div>
                           <div class="pl-3">
                              <h5>South Kellergrove Junior</h5>
                              <p class="mb-0">Junior High School | Class of 2008</p>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-md-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-header">
                     <div class="header-title">
                        <h4 class="card-title">Professional Skills</h4>
                     </div>
                  </div>
                  <div class="card-body">
                     <ul class="list-inline p-0 mb-0 skill-details">
                        <li>
                           <div class="d-flex align-items-center justify-content-between mb-4 row">
                              <div class="col-xl-4 col-lg-5">
                                 <p class="mb-0 font-size-16">Photoshop</p>
                              </div>
                              <div class="col-xl-8 col-lg-7">
                                 <div class="iq-progress-bar bg-primary-light mt-2">
                                    <span class="bg-primary iq-progress progress-1" data-percent="85">
                                       <span class="progress-text-one bg-primary">85%</span>
                                    </span>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li>
                           <div class="d-flex align-items-center justify-content-between mb-4 row">
                              <div class="col-xl-4 col-lg-5">
                                 <p class="mb-0 font-size-16">Illustrator</p>
                              </div>
                              <div class="col-xl-8 col-lg-7">
                                 <div class="iq-progress-bar bg-warning-light mt-2">
                                    <span class="bg-warning iq-progress progress-1" data-percent="65">
                                       <span class="progress-text-one bg-warning">65%</span>
                                    </span>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li>
                           <div class="d-flex align-items-center justify-content-between mb-4 row">
                              <div class="col-xl-4 col-lg-5">
                                 <p class="mb-0 font-size-16">Adobe XD</p>
                              </div>
                              <div class="col-xl-8 col-lg-7">
                                 <div class="iq-progress-bar bg-success-light mt-2">
                                    <span class="bg-success iq-progress progress-1" data-percent="55">
                                       <span class="progress-text-one bg-success">55%</span>
                                    </span>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li>
                           <div class="d-flex align-items-center justify-content-between row">
                              <div class="col-xl-4 col-lg-5">
                                 <p class="mb-0 font-size-16">Figma</p>
                              </div>
                              <div class="col-xl-8 col-lg-7">
                                 <div class="iq-progress-bar bg-info-light mt-2">
                                    <span class="bg-info iq-progress progress-1" data-percent="60">
                                       <span class="progress-text-one bg-info">60%</span>
                                    </span>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-md-6">
               <div class="card card-block card-stretch card-height">
                  <div class="card-header">
                     <div class="header-title">
                        <h4 class="card-title">Personal Skills</h4>
                     </div>
                  </div>
                  <div class="card-body">
                     <ul class="list-inline p-0 m-0">
                        <li class="mb-3">
                           <div class="d-flex align-items-center">
                              <div class="badge badge-light iq-number">1</div>
                              <div class="ml-3">
                                 <p class="mb-0 font-size-16">Creative spirit</p>
                              </div>
                           </div>
                        </li>
                        <li class="mb-3">
                           <div class="d-flex align-items-center">
                              <div class="badge  badge-light iq-number">2</div>
                              <div class="ml-3">
                                 <p class="mb-0 font-size-16">Reliable and professional</p>
                              </div>
                           </div>
                        </li>
                        <li class="mb-3">
                           <div class="d-flex align-items-center">
                              <div class="badge  badge-light iq-number">3</div>
                              <div class="ml-3">
                                 <p class="mb-0 font-size-16">Time management</p>
                              </div>
                           </div>
                        </li>
                        <li class="">
                           <div class="d-flex align-items-center">
                              <div class="badge  badge-light iq-number">4</div>
                              <div class="ml-3">
                                 <p class="mb-0 font-size-16">Organized</p>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-md-6 col-lg-4">
               <div class="card card-block card-stretch card-height">
                  <div class="card-header">
                     <div class="header-title">
                        <h4 class="card-title">Contact Information</h4>
                     </div>
                  </div>
                  <div class="card-body">
                     <ul class="list-inline p-0 m-0 iq-contact-rest">
                        <li class="mb-3 d-flex">
                           <span><i class="fas fa-map-marker-alt mr-3 font-size-20"></i></span>
                           <p class="mb-0 font-size-16 line-height">505 West Brickyard Rd, CA , USA</p>
                        </li>
                        <li class="mb-3 d-flex">
                           <span><i class="fas fa-phone-volume mr-3 font-size-20"></i></span>
                           <p class="mb-0 font-size-16 line-height">+91 01234 56789</p>
                        </li>
                        <li class="mb-3 d-flex">
                           <span><i class="fas fa-envelope-open mr-3 font-size-20"></i></span>
                           <p class="mb-0 font-size-16 line-height"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5dfdadddbf5c5c7dac5d0c7c1cc9bd6dad8">[email&#160;protected]</a></p>
                        </li>
                        <li class="mb-3 d-flex">
                           <a href="javascript:void(0);" class="d-flex">
                              <i class="fas fa-link  mr-3 font-size-20"></i>
                              <p class="mb-0 font-size-16 line-height">http://www.yourwebsitename.com </p>
                           </a>
                        </li>
                        <li class="d-flex">
                           <span><i class="fas fa-briefcase mr-3 font-size-20"></i></span>
                           <p class="mb-0 font-size-16 line-height">9486 Roberts St.
                              Monroe Township.</p>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      </div>
    </div>
    <!-- Wrapper End-->
    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright 2020 <a href="http://www.bootstrapmb.com/">CloudBOX</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <!-- Backend Bundle JavaScript -->
    <script src="assets/js/backend-bundle.min.js"></script>
    
    <!-- Chart Custom JavaScript -->
    <script src="assets/js/customizer.js"></script>
    
    <!-- Chart Custom JavaScript -->
    <script src="assets/js/chart-custom.js"></script>
    
    <!--PDF-->
    <script src="assets/vendor/doc-viewer/include/pdf/pdf.js"></script>
    <!--Docs-->
    <script src="assets/vendor/doc-viewer/include/docx/jszip-utils.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/mammoth.browser.min.js"></script>
    <!--PPTX-->
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/filereader.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/nv.d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/pptxjs.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/divs2slides.js"></script>
    <!--All Spreadsheet -->
    <script src="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/xlsx.full.min.js"></script>
    <!--Image viewer-->
    <script src="assets/vendor/doc-viewer/include/verySimpleImageViewer/js/jquery.verySimpleImageViewer.js"></script>
    <!--officeToHtml-->
    <script src="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.js"></script>
    <script src="assets/js/doc-viewer.js"></script>
    <!-- app JavaScript -->
    <script src="assets/js/app.js"></script>
     <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">Title</h4>
                    <div>
                        <a class="btn" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </a>
                    </div>
                </div>
                <div class="modal-body">
                    <div id="resolte-contaniner" style="height: 500px;" class="overflow-auto">
                        File not found
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>